export default class ClusterBubble extends TMap.DOMOverlay {
  constructor(options) {
    super(options)
    // 移动端touchmove事件执行时需禁止触发touchend
    this.enableClick = true
  }

  onInit (options) {
    this.content = options.content
    this.position = options.position
  }

  // 销毁时需要删除监听器
  onDestroy () {
    this.dom.removeEventListener('click', this.onClick)
    this.removeAllListeners()
  }


  // 点击事件
  onClick (e) {
    this.emit('click')
  }


  createDOM () {
    let dom = document.createElement('div')
    dom.classList.add('clusterBubble')
    dom.innerText = this.content
    dom.style.cssText = [
      'width: ' + (40 + parseInt(this.content) * 0.1) + 'px;',
      'height: ' + (40 + parseInt(this.content) * 0.1) + 'px;',
      'line-height: ' + (40 + parseInt(this.content) * 0.1) + 'px;',
      'cursor:' + 'pointer'
    ].join(' ')

    // 监听点击事件，实现zoomOnClick
    this.onClick = this.onClick.bind(this)
    // pc端注册click事件，移动端注册touchend事件
    dom.addEventListener('click', this.onClick)
    return dom
  }


  // 更新
  updateDOM () {
    if (!this.map) {
      return
    }
    // 经纬度坐标转容器像素坐标
    let pixel = this.map.projectToContainer(this.position)

    // 使饼图中心点对齐经纬度坐标点
    let left = pixel.getX() - this.dom.clientWidth / 2 + 'px'
    let top = pixel.getY() - this.dom.clientHeight / 2 + 'px'
    this.dom.style.transform = `translate(${left}, ${top})`
    this.emit('dom_updated')
  }

}